<template>
	<view class="st-marketing-group" v-if="marketingApps.length">
		<view class="item" v-for="(item, index) in marketingApps" :key="index">
			<rich-text class="iconfont" :nodes="item.icon"></rich-text>
			<text class="name">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 营销优惠展示
	 * @description 产品列表显示对应产品可使用的营销优惠
	 * @property {Array} marketingApps
	 * 
	 */
	export default {
		name:"st-marketing-group",
		props: {
			marketingApps: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				
			};
		},
		
	}
</script>

<style lang="scss" scoped>
.st-marketing-group{
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
	padding: 6rpx 0;
	position: relative;
	border-radius: 12rpx;
	background: #FFEAE7;
	&::after{
		content: "";
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -6rpx;
		left: 100rpx;
		transform: rotate(45deg);
		background: #FFEAE7;
	}
	.item{
		padding: 4rpx 28rpx;
		@extend .alignItems;
		position: relative;
		&:after{
			content: "";
			display: inline-block;
			width: 1px;
			height: 24rpx;
			position: absolute;
			right: 0;
			background: rgba(255,47,54,0.2);
		}
		.iconfont{
			color: #FF2F36;
			font-size: 24rpx;
			border-radius: 50%;
			background: #fff;
		}
		.name{
			color: #FF2F36;
			margin-left: 10rpx;
			font-size: 20rpx
		}
	}
}
</style>